<template>
    <div class="wrap">
        <div class="wrap-map">
            <el-bmap class="map" ref="bgmap" :map-style-v2="darkStyle" :center="center" :zoom="zoom" :min-zoom="10" :max-zoom="19" :events="events">
                <template v-for="(marker, index) in projectList">
                    <el-bmap-marker :icon="marker.icon" :position="[marker.lng,marker.lat]" :title="marker.name" :events="markerEvents" :vid="index"></el-bmap-marker>
                    <el-bmap-label :content="marker.name" :visible="labelVisible" :label-style="labelStyle" :offset="['-90px','35px']" :position="[marker.lng,marker.lat]"></el-bmap-label>
                </template>
            </el-bmap>
            <div class="detail-box" v-drag v-if="infoShow">
                <div class="detail-hd">
                    <h5>项目简介</h5>
                    <span @click="detail(marker.id)">查看详情 >></span>
                </div>
                <el-image class="detai-img" :src="marker.thumbnail" fit="cover"></el-image>
                <h4>{{marker.name}} <el-tag size="small" :type="marker.projStatus == 0 ? 'info' : marker.projStatus == 2 ? 'success' : marker.projStatus == 3 ? 'danger' : ''">{{marker.projStatus == 0 ? '准备' : marker.projStatus == 1 ? '在建' : marker.projStatus == 2 ? '竣工' : '停工'}}</el-tag></h4>
                <div class="detail-bd">
                    <p>项目地址：{{marker.address}}</p>
                    <p>建设单位：{{marker.generalContractor}}</p>
                    <p>设计单位：{{marker.designUnit}}</p>
                    <p>施工单位：{{marker.constructUnit}}</p>
                    <p>监理单位：{{marker.supervisorUnit}}</p>
                </div>
                <div class="close">
                    <i class="el-icon-circle-close" @click="infoShow = false"></i>
                </div>
            </div>
        </div>
        <div class="wrap-header">
            <h1>智慧工地管理云平台</h1>
            <div class="timer">
               {{nowtime}} {{nowdate}}
            </div>
        </div>
        <div class="wrap-nav">
            <div class="item" v-for="(item,index) in nav" :key="index" :class="index == activeMenu ? 'active' : ''" @click="handleChangeNav(index)">
                <span class="icon">
                    <i class="iconfont" :class="item.icon"></i>
                </span>
                <h4>{{item.name}}</h4>
            </div>
        </div>
        <div class="wrap-right">
            <img v-if="!activeComponent" src="../../assets/images/slide_left.png" class="slide-left" @click="slideLeft" />
            <transition name="slide-fade">
                <component :is="activeComponent">
                    <img src="../../assets/images/slide_right.png" class="slide-right" @click="slideRight" />
                </component>
            </transition>
        </div>
    </div>
</template>

<script>
import mapStyle from './components/mapStyle'
import { mapGetters } from "vuex";
import moment from 'moment'
export default {
    components:{
        overview:() => import('./components/overview.vue'),
        quality:() => import('./components/quality.vue'),
        device:() => import('./components/device.vue'),
        ai:() => import('./components/ai.vue'),
        materials:() => import('./components/materials.vue'),
        safety: () => import('./components/safety.vue'),
        labour: () => import('./components/labour.vue')
    },
    computed:{
        nowtime(){
            return moment(this.nowDate).format('HH:mm:ss')
        },
        nowweek(){
            let weeks = ['日','一','二','三','四','五','六']
            let e = moment(this.nowDate).format('e')
            return '星期' + weeks[e]
        },
        nowdate(){
            return moment(this.nowDate).format('YYYY/MM/DD')
        },
        ...mapGetters(["userinfo"])
    },
    data(){
        return{
            //地图
            zoom:12,
            center: [113.306438,23.15817],
            map: null,
            nowDate:new Date(),
            events:{
                init: (o) => {
                    this.map = o;
                },
                zoomend:(e) => {
                    this.labelVisible = !(this.map.zoomLevel < 12)
                }
            },
            markerEvents:{
                click:(e) => {
                    let vid = e.currentTarget._config.vid
                    this.handleMarkerClick(vid)
                }
            },
            darkStyle:mapStyle,
            labelStyle:{
                'color':"rgba(255,255,255,0.8)",
                'border':'none',
                'font-size':'12px',
                'background':'none',
                'text-align':'center',
                'width':'200px'
            },
            labelVisible:true,
            //menu
            nav:[
                {name:'首页总览',icon:'icon-shouye',component:'overview'},
                // {name:'进度管理',icon:'icon-jindutiao'},
                {name:'质量管理',icon:'icon-zhiliang3',component:'quality'},

                {name:'安全管理',icon:'icon-yujing',component:'safety'},
                {name:'劳务管理',icon:'icon-gongren',component:'labour'},
                {name:'智能设备',icon:'icon--shebei',component:'device'},
                {name:'视频AI',icon:'icon-shipin',component:'ai'},
                {name:'物资管理',icon:'icon-ziyuan213',component:'materials'},
            ],
            activeMenu:0,
            activeComponent:'overview',
            //项目
            projectList:[],
            infoShow:false,
            marker:""
        }
    },
    created() {
        this.getProjectList()
    },
    mounted(){
        setInterval(()=>{
        this.nowDate = new Date()
        },1000)
    },
    methods: {
        //切换导航
        handleChangeNav(idx){
            this.activeMenu = idx
            this.activeComponent = this.nav[idx].component
        },
        slideRight(){
            this.activeComponent = ''
        },
        slideLeft(){
            this.activeComponent = this.nav[this.activeMenu].component
        },
        //全部项目列表
        getProjectList(){
            this.$api.getProjectList({current:1,size:500}).then(res => {
                if(res.code == 0){
                    res.data.records.map(item => {
                        item.detailshow = false
                        if(item.projStatus && item.projStatus == 0) item.icon = { url:'https://iotx.oss-cn-beijing.aliyuncs.com/platform-gz/image/yellow.png',size:[20,30]}
                        if(item.projStatus && item.projStatus == 1) item.icon = { url:'https://iotx.oss-cn-beijing.aliyuncs.com/platform-gz/image/blue.png',size:[20,30]}
                        if(item.projStatus && item.projStatus == 2) item.icon = { url:'https://iotx.oss-cn-beijing.aliyuncs.com/platform-gz/image/green.png',size:[20,30]}
                        if(item.projStatus && item.projStatus == 3) item.icon = { url:'https://iotx.oss-cn-beijing.aliyuncs.com/platform-gz/image/red.png',size:[20,30]}
                    })
                    this.projectList = res.data.records
                }
            })
        },
        handleMarkerClick(idx){
            this.marker = this.projectList[idx]
            this.infoShow = true
        },
        detail(id){
            let routeUrl = this.$router.resolve({
                path: '/datap',
                query:{
                    id:id,
                    t:getUrlSearch('t') || this.userinfo.access_token
                }
            });
            window.open(routeUrl.href, '_blank');
        }
    },
}
function getUrlSearch(name) {
  // 未传参，返回空
  if (!name) return null;
  // 查询参数：先通过search取值，如果取不到就通过hash来取
  var after = window.location.search;
  after = after.substr(1) || window.location.hash.split('?')[1];
  // 地址栏URL没有查询参数，返回空
  if (!after) return null;
  // 如果查询参数中没有"name"，返回空
  if (after.indexOf(name) === -1) return null;
 
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  // 当地址栏参数存在中文时，需要解码，不然会乱码
  var r = decodeURI(after).match(reg);
  // 如果url中"name"没有值，返回空
  if (!r) return null;
 
  return r[2];
}
</script>

<style lang="scss" scoped>
.wrap{
    width: 100vw;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.map{
    width: 100vw;
    height: 100vh;
}
::v-deep .anchorBL {
  display: none;
}
.wrap-header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1366px;
    height: 80px;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &::before{
        content: '';
        position: absolute;
        width: 50%;
        height: 80px;
        left: 0;
        top: 0;
        background: url("../../assets/images/header_bg.png") left 0 no-repeat;
    }
    &::after{
        content: '';
        position: absolute;
        width: 50%;
        height: 80px;
        right: 0;
        top: 0;
        background: url("../../assets/images/header_bg.png") right 0 no-repeat;
    }
    h1{
        margin: 0;
        font-family: 'youshe',Microsoft YaHei;
        font-weight: normal;
        font-size: 40px;
        color: #EBEDFF;
        padding-left: 60px;
        position: relative;
        z-index: 1;
    }
    .timer{
        font-size: 19px;
        color: #EBEDFF;
        padding-right: 20px;
        font-family: 'youshe',Microsoft YaHei;
        position: relative;
        z-index: 1;
    }
}
.wrap-nav{
    position: absolute;
    border-radius: 0px 11px 11px 0px;
    background: rgba(0,0,0,0.53);
    left: 0;
    top: calc(90px + 10vh);
    overflow-y: auto;
    max-height: calc(80vh - 90px);
    padding: 30px 30px 0 20px;
    z-index: 999;
    .item{
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-bottom: 30px;
        flex: 1;
        .icon{
            width: 40px;
            height: 40px;
            margin-right: 12px;
            border: 2px solid #4862E0;
            background: rgba(72,98,224,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4862E0;
            i{
                font-size: 18px;
            }
        }
        h4{
            font-family: 'youshe',Microsoft YaHei;
            font-size: 22px;
            color: #4862E0;
            font-weight: normal;
            margin: 0;
            padding: 0;
        }
        &.active{
            .icon{
                background: rgba(250,178,23,0.14);
                border: 2px solid #FAB217;
                color: #FAB217;
            }
            h4{
                color: #FAB217;
            }
        }
    }
}

.slide-fade-enter-active {
  transition: all .2s ease;
}
.slide-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.slide-right,.slide-left{
  position: fixed;
  right:470px;
  top:50%;
  z-index: 100;
  cursor: pointer;
  transition: all .3s ease;
}
.slide-left{
  right:0;
}

.detail-box{
    width: 340px;
    height: 430px;
    background: url("../../assets/images/info_bg.png") 0 0 no-repeat;
    background-size: 100% 100%;
    padding: 28px;
    position: absolute;
    z-index: 9999;
    left: calc(50% - 170px);
    top: calc(50% - 215px);
    .detail-hd{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: rgba(255,255,255,0.85);
        h5{
            margin: 0;
            font-size: 18px;
        }
        span{
            font-size: 14px;
            color: #CFD7FF;
            cursor: pointer;
        }
    }
    .detai-img{
        width: 100%;
        height: 130px;
        margin: 12px 0;
    }
    h4{
        font-weight: normal;
        font-size: 16px;
        color: rgba(255,255,255,0.85);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
    }
    .detail-bd{
        color: rgba(255,255,255,0.85);
        p{
            font-size: 14px;
            margin: 12px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; 
        }
    }
    .close{
        font-size: 30px;
        color: rgba(255,255,255,0.4);
        margin: 0 auto;
        text-align: center;
        i{
            cursor: pointer;
        }
    }
}

</style>